<template>
  <div class="header-container">
    <div class="header-left flex-box">
      <el-icon size="20" @click="store.commit('collapseMenu')"><Fold /></el-icon>
      <ul class="flex-box">
        <li 
        v-for="(item,index) in selectMenu"
        :key="item.path"
        :class="{selected: route.path === item.path}"
        class="tab flex-box"
        @click="handleTagClick(item)">
          <el-icon size="12"><component :is="item.icon"></component></el-icon>
          <router-link :to="item.path" class="text flex-box">{{item.name}}</router-link>
          <el-icon size="12" @click="closeTag(item,index,$event)"><Close class="Close"/></el-icon>
        </li>
      </ul>
    </div>
    <div class="header-right">
      <el-dropdown @command="handleClick">
        <span class="el-dropdown-link flex-box">
           <div>
              <el-avatar
                :src="userLocalData.avatar"
              />
            </div>
          <span>{{ userLocalData.name }}</span>
        </span>
        <template #dropdown>
            <el-dropdown-item command="cancel">登出</el-dropdown-item>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>
<script setup>
import { useStore } from 'vuex';
import { computed } from 'vue';
import { useRoute, useRouter} from 'vue-router'

const store = useStore()
const route=useRoute()
const router=useRouter()
const selectMenu=computed(()=>store.state.menu.selectMenu)

//账号信息
const userLocalData=JSON.parse(localStorage.getItem('pz_userInfo'))

// 点击Tag时，更新菜单高亮并导航
const handleTagClick = (item) => {
  // console.log(item,'item')
  // router.push(item.path); // 导航到对应路径
  store.commit('changeActive', item.active); // 更新菜单高亮
};

const closeTag=(item,index,event)=>{
  // 关键：阻止事件冒泡到父元素 li
  event.stopPropagation();
  //注意，这里是先删除数组selectMenu中数据的，要注意索引值的变化
  store.commit('closeMenu',item)
  if(route.path!==item.path){
    return//若删除的非当前页，到此为止
  }
  //删除当前页
  const newSelectMenu=selectMenu.value
  if(index===newSelectMenu.length){
    //删除的是最后一项
    if(!newSelectMenu.length){
      //仅有一项
      router.push('/')
      store.commit('changeActive','')
    }else{
      //原来有多项,选中前一项
      router.push(newSelectMenu[index-1].path)
      store.commit('changeActive', newSelectMenu[index-1].active)
    }
  }else{
    router.push(newSelectMenu[index].path)
    store.commit('changeActive', newSelectMenu[index].active)
  }
}

//登出
const handleClick=(command)=>{
  if(command==="cancel"){
    localStorage.removeItem('pz_token')
    localStorage.removeItem('pz_userInfo')
    localStorage.removeItem('pz_v3pz')
    window.location.href=window.location.origin
    // window.location.href = `${window.location.origin}/login`;
  }
}
</script>

<style lang="less" scoped>

.flex-box {
    display: flex;
    align-items: center;
    height: 100%;
}
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    background-color: #fff;
    padding-right: 25px;
    .header-left {
        height: 100%;
        .icon {
            width: 45px;
            height: 100%;
        }
        .icon:hover {
            background-color: #f5f5f5;
            cursor: pointer;
        }
        .tab {
            padding: 0 10px;
            height: 100%;
            .text {
                margin: 0 5px;
            }
            .close {
                visibility: hidden;
            }
            &.selected {
                a {
                    color: #409eff;
                }
                i {
                    color: #409eff;
                }
                background-color: #f5f5f5;
            }
        }
        .tab:hover {
            background-color: #f5f5f5;
            .close {
                visibility: inherit;
                cursor: pointer;
                color: #000;
            }
        }
    }
    .header-right {
        .user-name {
            margin-left: 10px;
        }
    }
    a {
        height: 100%;
        color: #333;
        font-size: 15px;
    }
}
</style>